<%@ taglib prefix="maxlength" uri="http://www.springframework.org/tags/form" %>
<%--
  Created by IntelliJ IDEA.
  User: Easy
  Date: 2017-09-27
  Time: 15:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>

<div class="row">
    <div class="col-md-12">

        <form  class="form-horizontal" id="editParkingForm" >
            <div class="panel panel-default">
                <div class="panel-body">

                    <div class="row">
                        <div class="col-md-6">

                            <div class="form-group">
                                <label class="col-md-3 control-label">名称</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-eye"></span></span>
                                        <input type="hidden" class="form-control" name="id" value="${parking.id}" >
                                        <input type="text" class="form-control" name="name" value="${parking.name}" >
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">省</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-eye"></span></span>
                                        <%--<input type="text" class="form-control required" name="province" data-tip="请选择省份"  data-valid="isNonEmpty" data-error="省不能为空" >--%>
                                        <select name="province"  id="province" class="form-control required"  onclick="chooseMarket();">
                                            <option selected value="">选择所在的省份</option>
                                            <c:forEach var="item" items="${provinces}" varStatus="status">
                                                <option value="${item.name}" <c:if test="${parking.province==item.name}">selected</c:if>>${item.name}</option>
                                            </c:forEach>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">区</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-eye"></span></span>
                                        <%--<input type="text" class="form-control required" name="area" data-tip="请选择区" id="area" data-valid="isNonEmpty" data-error="区不能为空" >--%>
                                        <select name="area" required id="area"  class="form-control required">
                                            <c:forEach var="item" items="${county}" varStatus="status">
                                                <option value="${item.name}" <c:if test="${item.name == parking.area}">selected</c:if>>${item.name}</option>
                                            </c:forEach>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">经度</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-sort"></span></span>
                                        <input type="text" id="getlng" class="form-control"   name="lng"  readonly  value="${parking.lng}">
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">白天费用</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-sort"></span></span>
                                        <input type="text" class="form-control" name="dayFee"  value="${parking.dayFee}" >
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">开放时间</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-sort"></span></span>
                                        <input type="text" class="form-control" name="startTime"  value="${parking.startTime}">
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">负责人</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-sort"></span></span>
                                        <input type="text" class="form-control"   name="contacts"  value="${parking.contacts}" >
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">免费时长</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-sort"></span></span>
                                        <input type="text" class="form-control"  name="charging"  value="${parking.charging}">
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">备注</label>
                                <div class="col-md-9 col-xs-12">
                                    <textarea class="form-control"  rows="5" id="info" name="info">${parking.info}</textarea>
                                </div>
                            </div>

                        </div>


                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="col-md-3 control-label">总层数</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-sort"></span></span>
                                        <input type="text" class="form-control " name="floor" value="${parking.floor}" >
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-3 control-label">市</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-sort"></span></span>
                                        <%--<input type="text" class="form-control required" id="city" data-tip="请选择市" data-valid="isNonEmpty"  data-error="市不允许为空" name="city">--%>
                                        <select id="city" name="city" required class="form-control required"   onclick="chooseArea();"  >
                                            <c:forEach var="item" items="${city}" varStatus="status">
                                                <option value="${item.name}" <c:if test="${item.name == parking.city}">selected</c:if>>${item.name}</option>
                                            </c:forEach>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">详细地址</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-sort"></span></span>
                                        <input type="text" class="form-control" name="address" onfocus="openMap()"  value="${parking.address}">
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">纬度</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-sort"></span></span>
                                        <input type="text" id="getlat" class="form-control"   name="lat"   value="${parking.lat}" readonly >
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">晚上费用</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-sort"></span></span>
                                        <input type="text" class="form-control" name="nightFee"  value="${parking.nightFee}" >
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">结束时间</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-sort"></span></span>
                                        <input type="text" class="form-control"  name="stopTime"  value="${parking.stopTime}">
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">联系方式</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-sort"></span></span>
                                        <input type="text" class="form-control" name="conPhone"   value="${parking.conPhone.trim()}">
                                    </div>
                                </div>
                            </div>



                            <div  class="form-group">
                                <input type="hidden" name="imgId" class="img-id" value="${picture.id}" />
                                    <c:if test="${picture.picUrl !=null && picture.picUrl !=''}">
                                        <div class="layui-upload-drag" style="border-color:#FFFAFA; background-color:#FFFAFA">
                                            <img style="max-width: 100%;height: 100%;" src="${picture.picUrl}" class="img-parking" />
                                        </div>
                                    </c:if>
                                    <c:if test="${picture.picUrl ==null || picture.picUrl ==''}">
                                        <div class="layui-upload-drag" >
                                            <i class="layui-icon fa fa-cloud-upload"></i>
                                            <p>点击上传停车场地图</p>
                                        </div>
                                    </c:if>
                            </div>
                        </div>

                    </div>

                </div>
                <div class="panel-footer">
                    <button class="btn btn-default">清除</button>
                    <input type="button"class="btn btn-primary" onclick="edit()" value="修改">
                </div>
            </div>
        </form>

    </div>
</div>
<script>

    function openMap(){
        var lat= document.getElementById("getlat").value;//纬度
        var lng= document.getElementById("getlng").value;//经度
        var address=document.getElementById("getaddress").value;//经度
        if(lat!="" && lng!=""){
            otherChoose(lat,lng,address);
        }else{
            firstChoose()
        }
    }

    function  firstChoose() {
        $.post("/car/map/baidu", null, function(html){
            window.layer_mapModule = layer.open({
                id:"mapModule",
                type: 1,
                title:"选择地图",
                area:['900px','600px'],
                content: html,
                anim:1,
                shadeClose:false,
                btn:["确定","取消"],
                yes:function(){
                    $("#getlng").val($("#lng").val());
                    $("#getlat").val($("#lat").val());
                    $("#getaddress").val($("#address").val())
                    layer.close(layer_mapModule);
                },
                btn2:function(){},
                cancel: function(){}
            });
        });
    }

    function  otherChoose(lat,lng,address) {
        $.post("/car/map/otherBaidu", {"lat":lat,"lng":lng,"resAddress":address}, function(html){
            window.layer_mapModule = layer.open({
                id:"resMapModule",
                type: 1,
                title:"选择地图",
                area:['900px','600px'],
                content: html,
                anim:1,
                shadeClose:false,
                btn:["确定","取消"],
                yes:function(){
                    $("#getlng").val($("#lng").val());
                    $("#getlat").val($("#lat").val());
                    $("#getaddress").val($("#address").val())
                    layer.close(layer_mapModule);
                },
                btn2:function(){},
                cancel: function(){}
            });
        });
    }

    function parentSet(picture) {
        var id=picture.id;
        $(".img-id").val(picture.id);
        var imgDiv= $(".layui-upload-drag");
        imgDiv.empty();
        var img=document.createElement("img");
        img.className="img-parking";
        img.src=picture.src;
        img.setAttribute("max-width","100%");
        img.setAttribute("height","100%");
        imgDiv[0].appendChild(img);
        imgDiv.css("border-color" ,"#FFFAFA");
        imgDiv.css("background-color" ,"#FFFAFA");
    }

    function edit() {
        var param = serializeForm("editParkingForm");
        var info=$("#info").val();
        var province=$("#province").val();
        var city=$("#city").val();
        var area=$("#area").val();
        if(validform("editParkingForm").form()){
            $.ajax({
                type: 'post',
                dataType: 'json',
                data: param +"&info=" + info +"&province=" + province +"&city=" + city +"&area=" + area,
                async: true,
                url: '/car/parking/update',
                success: function (data) {
                    if (data.success){
                        layer.msg(data.msg,{icon:1,time:1000},function () {
                            layer.close(top.layer_parkingEdit);
                            reloadPage();
                        });
                    }else{
                        layer.msg(data.msg,{icon: 2,time:1000});
                    }
                },
                error: function () {
                    alert("保存未成功")
                }
            })
        }
    }

    function  chooseMarket() {
        var options=$("#province option:selected");
        if(options.text()!="选择所在的省份"){
            $.post("/city/chooseCity",{"name":options.val()},function (data) {
                for(var i=0; i<data.length; i++){
                    $("#city").append('<option value="' + data[i].name + '">' + data[i].name + '</option>')
                };
                var name=data[0].name;
                defaultNext(name);
            });
        }
        $("#city").empty();
        $("#area").empty();
    }

    function chooseArea() {
        var options=$("#city option:selected");
        if(options.text()!="请选择所在的市"){
            $.post("/city/chooseArea",{"name":options.val()},function (data) {
                for(var i=0; i<data.length; i++){
                    $("#area").append('<option value="' + data[i].name + '">' + data[i].name + '</option>')
                };
            });
        }
        $("#area").empty();
    }

    function defaultNext(name) {
        $.post("/city/defaultNext",{"name":name},function (data) {
            for(var i=0; i<data.length; i++){
                $("#area").append('<option value="' + data[i].name + '">' + data[i].name + '</option>')
            };
        });
        $("#area").empty();
    }

    $(".layui-upload-drag").on("click",function () {
        layer.open({
            id:'img-list',
            type: 2,
            title: "选择图片(双击选择图片)",
            maxmin: true,
            shadeClose: true, //点击遮罩关闭层
            area : ['1045px','630px'],
            content: '/picture/chooseImg',
        });

    })
</script>
